<template>
  <el-card>
    <template #header>
      <div class="flex">
        <div class="flex1">批量导入教师</div>
      </div>
    </template>
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      class="page"
    >
      <el-form-item label="下载模板">
        <div class="flex" style="width: 100%">
          <div class="flex1">
            <el-icon><Files /></el-icon>教师信息模板.xlsx
          </div>
          <el-button class="flex0" @click="onExport" type="primary"
            >下载</el-button
          >
        </div>
      </el-form-item>
      <el-form-item label="所属部落" prop="organizationId">
        <ApiSelect
          v-model="formData.organizationId"
          clearable
          apiName="organization"
        ></ApiSelect>
      </el-form-item>
      <el-form-item label="上传教师信息">
        <el-upload
          v-model:file-list="formData.file"
          drag
          :auto-upload="false"
          :limit="1"
        >
          <div
            style="
              width: 300px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
            "
          >
            <SvgIcon name="i-ep:upload-filled" class="el-icon--upload" />
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="formLoading" type="primary" @click="submitForm">
          提交
        </el-button>
        <el-button @click="$router.back()">取消 </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script lang="ts" setup>
import API from '@/api/api';
import { useMessage } from '@/hooks/useMessage';
import { createRequireRole } from '@/utils/rules';
import { useRequest } from 'vue-hooks-plus';
import useUserStore from '@/store/modules/user';
import { download } from '@/utils/download';
import { UploadInstance } from 'element-plus';
const router = useRouter();

const route = useRoute();
const message = useMessage(); // 消息弹窗

const submitReq = useRequest(
  async (sendData: any) => {
    return API.teacherController.import(sendData);
  },
  {
    manual: true,
  }
);

const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁
const formData = ref({
  file: [],
});
const formRules = reactive({
  countryName: [createRequireRole()],
  organizationId: [createRequireRole()],
  category: [createRequireRole()],
  phone: [createRequireRole()],
  realName: [createRequireRole()],
  sex: [createRequireRole()],
  status: [createRequireRole()],
});
const formRef = ref(); // 表单 Ref

function onExport() {
  API.teacherController
    .export(
      {
        isTemplate: 1,
      },
      {
        responseType: 'blob',
      }
    )
    .then(res => {
      return download(res, '教师信息模板');
    });
}
const submitForm = async () => {
  // 校验表单
  if (!formRef) return;
  const valid = await formRef.value.validate();
  if (!valid) return;
  if (!formData.value.file.length) {
    return message.error('请选择文件');
  }
  // 提交请求
  formLoading.value = true;

  // const data = formData.value;

  const data = new FormData();
  data.append('file', formData.value.file[0].raw);
  data.append('organizationId', formData.value.organizationId);
  try {
    await submitReq.runAsync(data);
    message.success('导入成功');
    router.back();
  } catch (e) {
    formLoading.value = false;
  }
};
</script>
